<!--券信息类-->
<template>
    <div class="coupon-item dialog-coupon">
        <div class="all-coupon clearfix" v-if="label == 'all'" :data-id="coupon.id" @click="chooseCoupon" :class="{active: isActive}">
            <div class="float-left"></div>
            <div class="float-right">
                <p>{{$t('product.detail.dialog2')}}</p>
                <p>{{$t('product.detail.dialog5')}}</p>
            </div>
        </div>
        <div class="serveral-coupon clearfix" v-if="label == 'some categories'" :data-id="coupon.id" @click="chooseCoupon" :class="{active: isActive}">
            <div class="float-left"></div>
            <div class="float-right">
                <p>{{$t('product.detail.dialog3')}}</p>
                <p class="text-elps">{{txt}}</p>
                <p v-if="selectable"><router-link :to="{name: 'couponAdapt', params: {id: coupon.id}}" class="more">{{$t('coupon.coupon.txt1')}}</router-link></p>
            </div>
        </div>
        <div class="serveral-goods clearfix" v-if="label == 'some goods'" :data-id="coupon.id" @click="chooseCoupon" :class="{active: isActive}">
            <div class="float-left"></div>
            <div class="float-right">
                <p>{{$t('product.detail.dialog4')}}</p>
                <p class="text-elps">{{txt}}</p>
                <p v-if="selectable"><router-link  :to="{name: 'couponAdapt', params: {id: coupon.id}}" class="more">{{$t('coupon.coupon.txt1')}}</router-link></p>
            </div>
        </div>
    </div>

</template>

<script>

    export default {
        props: {
            coupon: {
                type: Object,
                default: function () {
                    return {

                    }
                }
            },
            isActive: {
                type: Boolean,
                default: false
            },
            selectable: {
                type: Boolean,
                default: true
            },
            alllSelectable: {
                type: Boolean,
                default: true
            }
        },
        data() {
        return {
            label: 'all',
            txt: ''
        }
    },
    created() {
        this.whichLabel()
    },
    watch: {
        coupon: function(val) {
            if (val) {
                this.whichLabel()
            }
        }
    },
    methods: {
        formatTxt() {
            let temp = []
            if (!this.coupon.include) return ''
            if (this.coupon.include.cpPrdTypes && this.coupon.include.cpPrdTypes.length > 0) {
                this.coupon.include.cpPrdTypes.map(e => {
                    temp.push(e.name)
                });  
            }
            if (this.coupon.include.cpPrds && this.coupon.include.cpPrds.length > 0) {
                this.coupon.include.cpPrds.map(e => {
                    temp.push(e.name)
                });  
            }
            return temp.join(',')
        },
        whichLabel() {
            if (!this.coupon.include) return false
            if (this.coupon.include.cpPrds && this.coupon.include.cpPrds.length > 0) {
                this.label = 'some goods'
                this.txt = this.formatTxt()
            } else if (this.coupon.include.cpPrdTypes && this.coupon.include.cpPrdTypes.length > 0) {
                this.label = 'some categories'
                this.txt = this.formatTxt()
            } else {
                this.label = 'all'
            }
        },
        chooseCoupon(e) {
            if (this.alllSelectable && this.selectable) {
                $(e.currentTarget).addClass('active').parent().siblings().find('.clearfix').removeClass('active');
                this.$emit("getActiveId", e.currentTarget.dataset.id);
            }
        }
    }
    }
</script>
<style scoped>
    p {
        margin: 0;
        line-height: 1;
    }
    .coupon-item {
        margin-bottom: 12px;
    }
    .coupon-item .active .float-left {
        border-color: #EB9300;
    }
    .coupon-item.dialog-coupon .float-right {
        padding-left: 15px;
    }
    .coupon-item.dialog-coupon .float-right p:nth-of-type(1) {
        padding: 5px 0 10px 0;
    }
    .float-right .more {
        font-size: 12px;
        color: #3DBDB6;
    }
    .active p, .active .more {
        color: #EB9300 !important;
    }
</style>
<style type="text/css">


</style>

